<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let hd = {
        name: 'wzy',
        age: '26'
    }
    //  获取key
    console.log(Object.keys(hd));
    // 获取value
    console.log(Object.values(hd));
    // 获取 key-value ，相当于map的Entry结构  ,注意以上结构返回的数据类型都是数组 []
    console.log(Object.entries(hd))

    //  for in
    for (const key in hd) {
        console.log(hd[key])
    }

    for (const [key, value] of Object.entries(hd)) {
        console.log(value);
    }

    // for of, 前提： 只能遍历含有可迭代属性的对象，比如数组，对象是不行的
    let arr = ["js", "sql", "java"]
    for (const item of arr) {
        console.log(item)
    }

    let lessons = [
        {name: 'js', click: 88},
        {name: 'sql', class: 22}
    ]

    //  操作一下dom
    let ul = document.createElement('ul')
    for (const lesson of lessons) {
        let li = document.createElement('li')
        li.innerHTML = `课程：${lesson.name},点击数： ${lesson.click}`
        ul.appendChild(li)
    }
    document.body.appendChild(ul)
</script>

</html>
